﻿/// <reference path="../../jquery-1.10.2.js" />
/// <reference path="../../My/JQExtend.js" />

//JQ的拖放

var JQDD = {
    data: {
        hasBindEvent: false, //标志是否已经绑定过了document对象的事件
        curDropEl: null,    //当前投放的对象
        curDrapEl: null,     //当前拖住的对象
        curDrapCopyEl: null, //当前拖住对象的复制对象
        canDrop: false, //标志当前状态是否可以投放
        lastCanDrop: false, //缓冲上一次的是否可以投放的状态，因为不断切换背景图片，即使是同一张图片，也会导致闪烁的问题，不明白啥原因
        fnBeforeOnDrop: null, //投放的前触发的事件
        fnOnDrop: null//投放后的时候触发的事件
    },
    setDrapEl: function (el, fnBeforeOnDrop, fnOnDrop) {
        /// <summary>设置可以拖动对象</summary>
        /// <param name="el" type="DomElement/String[id]">可以拖放的对象</param>
        /// <param name="fnBeforeOnDrop" type="Function">投放前触发的事件，函数会传入当前投放的坐标，以及投放的接收对象</param>
        /// <param name="fnOnDrop" type="Function">投放后的时候触发的事件，函数会传入当前投放的坐标</param>
        el = jQuery.getJQObj(el);
        if (el === null) return;
        el.mousedown({ el: el, fnBeforeOnDrop: fnBeforeOnDrop, fnOnDrop: fnOnDrop }, function (e) {
            JQDD.data.curDrapEl = e.data.el;
            //记录事件
            JQDD.data.fnBeforeOnDrop = fnBeforeOnDrop;
            JQDD.data.fnOnDrop = fnOnDrop;
            var div = $.getJQObj("div_drapCopyEl");
            if (div.length === 0) {
                div = $("<div class='drapDiv canNotDrop' id='div_drapCopyEl'></div>");
                JQDD.data.curDrapCopyEl = div.appendTo(document.body);
            }
            div.empty(); //清除复制div的所有子节点
            $(e.data.el).attr("unselectable", "on");
            $(e.data.el).clone().css({
                'filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)'
            }).removeClass().appendTo(div);
            $(JQDD.data.curDrapCopyEl).css({
                'left': (e.pageX + 10) + 'px',
                'top': (e.pageY + 20) + 'px',
                'position': 'absolute'
            });
            div.show(); //显示复制的div
        }).css({
            'cursor': 'pointer'
        });

        //先判断是否绑定了document的移动事件
        if (!JQDD.data.hasBindEvent) {
            JQDD.data.hasBindEvent = true;
            $(document).bind("mousemove", function (e) {
                //如果有跟踪移动对象的话，则移动跟踪对象即可
                var moveEl = JQDD.data.curDrapCopyEl;
                if (!JQDD.data.curDrapEl) return; //如果当前拖住的对象为null，则不需要移动复制的对象了
                $(moveEl).attr("unselectable", "on");
                //如果增加了这个捕获鼠标事件，则被投放的对象无法获取onmouseup事件
                //moveEl[0].setCapture(); //在iframe的情况下，非常有用
                $(moveEl).css({
                    'left': (e.pageX + 10) + 'px',
                    'top': (e.pageY + 20) + 'px',
                    'position': 'absolute'
                    //拖放一般不需要设置此属性
                    //'z-index': $.zIndex++
                });
                if (JQDD.data.canDrop) {
                    if (!JQDD.data.lastCanDrop) {
                        JQDD.data.lastCanDrop = true;
                        $("#div_drapCopyEl").removeClass("canNotDrop");
                        $("#div_drapCopyEl").addClass("canDrop");
                    }
                }
                else {
                    if (JQDD.data.lastCanDrop) {
                        $("#div_drapCopyEl").removeClass("canDrop");
                        $("#div_drapCopyEl").addClass("canNotDrop");
                        JQDD.data.lastCanDrop = false;
                    }
                }
            }).bind("mouseup", function (e) {
                if (JQDD.data.curDrapEl) {
                    if (JQDD.data.fnBeforeOnDrop) {
                        JQDD.data.fnBeforeOnDrop.call(JQDD.data.curDrapEl, e, JQDD.data.curDropEl);
                    }
                    JQDD.drop();
                    if (JQDD.data.fnOnDrop) {
                        JQDD.data.fnOnDrop.call(JQDD.data.curDrapEl, e);
                    }
                }
            });
        }
    },
    setCanDropStatus: function (bCanDrop) {
        /// <summary>设置当前是否可以投放的状态</summary>    
        /// <param name="bCanDrop" type="Boolean">可以投放了</param>
        JQDD.data.canDrop = bCanDrop;
    },
    setDropEl: function (el) {
        /// <summary>设置可以投放的对象</summary>
        /// <param name="el" type="DomElement/String[id]">可以投放的对象</param>
        el = jQuery.getJQObj(el);
        if (el === null) return;
        el.mousemove({ el: el }, function (e) {
            //设置当前投放的对象
            JQDD.data.curDropEl = e.currentTarget;
            JQDD.data.canDrop = true;
        }).mouseout(function () {
            //清空投放的对象
            JQDD.data.curDropEl = null;
            JQDD.data.canDrop = false;
        });
    },
    drop: function () {
        /// <summary>释放对象</summary>
        var moveEl = JQDD.data.curDrapCopyEl;
        if (moveEl) {
            moveEl[0].releaseCapture();
            JQDD.data.curDrapEl = null;
            $(moveEl).hide();
        }
    }
};